<template>
  <div>

    <!-- <div class="head">
      <div @click="goback" style="cursor: pointer">
        <el-image
          style="height: 60px; width: 60px; border-radius: 20px"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.weite.com%2Ficon%2F8a%2Ff5%2Feb%2F8af5ebc6bcc120376d11dd6920478be1.jpg&refer=http%3A%2F%2Fimg.weite.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642093695&t=044a1321a8b81c401ac6e888708fcbfe"
        ></el-image>
      </div>

    </div> -->
    <div
        style="
        width: 500px;
        left: 55%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
      "
    >

      <el-card class="box-card" style="width: 400px">
        <div slot="header" class="clearfix">
          <div style="margin-left: 60px; font-size: 40px; font-family: 华文行楷; color: #eb5a17ec">
            用户个人中心
          </div>
          当前账号：<span>{{ user.username }}</span>
        </div>
        <div>
          <div style="display: flex; justify-content: center">
            <el-upload
                action="/userinfo/userface"
                :data="user"
                :headers="headers"
                :show-file-list="false"
                :on-success="onSuccess"
            >
              <el-image
                  title="点击修改用户头像"
                  :src="user.userFace"
                  style="height: 100px; width: 100px; border-radius: 50px"
                  alt=""
              />
            </el-upload>
          </div>
          <div>
            用户昵称：
            <el-tag>{{ user.unickName }}</el-tag>
          </div>
          <div>
            电话号码：
            <el-tag>{{ user.uphoneNum }}</el-tag>
          </div>
          <div>
            收货地址：
            <el-tag>{{ user.uaddress }}</el-tag>
          </div>
          <div
              style="
              display: flex;
              justify-content: space-around;
              margin-top: 10px;
            "
          >
            <el-button type="primary" @click="showUpdateUserInfoView"
            >修改信息</el-button
            >
            <el-button type="danger" @click="showUpdatePasswordView"
            >修改密码</el-button
            >
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog
        title="更新密码"
        :visible.sync="passwordDialogVisible"
        width="30%"
    >
      <div>
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="请输入旧密码" prop="oldPass">
            <el-input
                type="password"
                v-model="ruleForm.oldPass"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="请输入新密码" prop="pass">
            <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="请确认新密码" prop="checkPass">
            <el-input
                type="password"
                v-model="ruleForm.checkPass"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%">
      <div>
        <table>
          <tr>
            <td>用户账号：</td>
            <td><el-input v-model="user2.username"></el-input></td>
          </tr>
          <tr>
            <td>用户昵称：</td>
            <td><el-input v-model="user2.unickName"></el-input></td>
          </tr>
          <tr>
            <td>电话号码：</td>
            <td><el-input v-model="user2.uphoneNum"></el-input></td>
          </tr>
          <tr>
            <td>联系地址：</td>
            <td><el-input v-model="user2.uaddress"></el-input></td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserInfo">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserInfo1",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      headers: {
        Authorization: window.sessionStorage.getItem("tokenStr"),
      },
      user: null,
      user2: null,
      dialogVisible: false,
      passwordDialogVisible: false,
      ruleForm: {
        pass: "",
        checkPass: "",
        oldPass: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        oldPass: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.initUser();
  },
  methods: {
    onSuccess() {
      this.initUser();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.userId = this.user.id;
          this.putRequest("/userinfo/password", this.ruleForm).then((resp) => {
            if (resp) {
              //更新密码成功后退出登录流程
              this.postRequest("/logout");
              window.sessionStorage.removeItem("user");
              window.sessionStorage.removeItem("tokenStr");
              this.$store.commit("initRoutes", []);
              this.$router.replace("/userlogin");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    showUpdatePasswordView() {
      this.passwordDialogVisible = true;
    },
    updateUserInfo() {
      this.putRequest("/userinfo/", this.user2).then((resp) => {
        if (resp) {
          this.dialogVisible = false;
          this.initUser();
        }
      });
    },
    showUpdateUserInfoView() {
      this.dialogVisible = true;
    },
    initUser() {
      this.getRequest("/user/info").then((resp) => {
        if (resp) {
          this.user = resp;
          this.user2 = Object.assign({}, this.user); //对象拷贝
          window.sessionStorage.setItem("user", JSON.stringify(resp));
          //更新vuex中的数据
          this.$store.commit("INIT_CURRENTUSER", resp);
        }
      });
    },
    goback() {
      this.$router.push("/mainpage");
    },
  },
};
</script>

<style scoped>
/* .head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 50px 100px;
  box-sizing: border-box;
} */
</style>